<template>
  <div style="height: 100%">
    <headPage></headPage>
    <div class="tree-info-wrap">
      <div class="tree-wrap">
        <div style="width:100%;height: calc(100% - 0.2rem);overflow: auto;">
          <el-tree
              ref="data_ref"
              :data="dataSource"
              :show-checkbox="false"
              node-key="menuId"
              :load="loadNode"
              :default-expanded-keys="expandedKeys"
              :current-node-key="expandedKeys[0]"
              lazy
              :props="props"
              highlight-current
              :expand-on-click-node="false"
          >
            <template #default="{ node, data }">
            <span class="custom-tree-node">
              <div @click="getCurrentInfo(node,data)" style="display: flex;align-items: center">
                {{ node.data.title }}
                <img v-if="node.data.status!=1" style="width: .25rem" src="../../assets/images/shixiao.png">
              </div>
              <span>
                <a @click="append(node,data)" v-if="node.data.type!=9" class="btn-tree"> 新增 </a>
                <a @click="update(node,data)" class="btn-tree"> 修改 </a>
                <a @click="remove(node, data)" class="btn-tree"> 删除 </a>
              </span>
            </span>
            </template>
          </el-tree>
        </div>
        <el-button @click="addRoot" type="primary" size="small" style="width:80%;position: absolute;bottom:.05rem;left: 10%">添加根节点</el-button>
      </div>
      <div class="node-wrap">
        <div v-show="type"  v-if="paramsNode">
          <div>
            <div class="tittle-wrap">
              <span>节点信息</span>
              <el-button type="primary" v-if="type=='add'" @click="saveNode" :disabled="saveflag" size="small">保存</el-button>
            </div>
            <el-form :inline="true" ref="ref_node" :model="paramsNode" label-width="150px" :rules="noderules">
              <el-row :span="24">
                <el-col :span="12" v-if="paramsNode.level!=1">
                  <el-form-item label="父级菜单：">
                    <span>{{paramsNode.pName}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="节点名称：" prop="title">
                    <span v-if="type=='view'">{{paramsNode.title}}</span>
                    <el-input v-else v-model="paramsNode.title" clearable style="width: 100%" placeholder="请输入节点名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="排序：" prop="menuSort">
                    <span v-if="type=='view'">{{paramsNode.menuSort}}</span>
                    <el-input v-else v-model="paramsNode.menuSort" clearable style="width: 100%" placeholder="请输入排序"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="节点状态：" prop="status">
                    <span v-if="type=='view'">{{node_status_option_desc[paramsNode.status]}}</span>
                    <el-radio-group v-else v-model="paramsNode.status" class="ml-4">
                      <el-radio v-for="(item, index) in node_status_option"
                                :label="item.value"
                                :key="index">
                        {{ item.label }}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="节点类型：" prop="type">
                    <span v-if="type=='view'">{{node_type_option_desc[paramsNode.type]}}</span>
                    <el-radio-group v-else-if="paramsNode.type=='0'" v-model="paramsNode.type" class="ml-4">
                      <el-radio label="0">根节点</el-radio>
                    </el-radio-group>
                    <el-radio-group v-else v-model="paramsNode.type" class="ml-4">
                      <el-radio v-for="(item, index) in node_type_option"
                                :label="item.value"
                                :key="index">
                        {{ item.label }}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="指标大类是否展示：" prop="isVisible">
                    <span v-if="type=='view'">{{node_table_option_desc[paramsNode.isVisible]}}</span>
                    <el-radio-group v-else v-model="paramsNode.isVisible" class="ml-4">
                      <el-radio v-for="(item, index) in node_table_option"
                                :label="item.value"
                                :key="index">
                        {{ item.label }}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="paramsNode.ifTabShow">
                  <el-form-item label="是否数据表：" prop="ifTab">
                    <span v-if="type=='view'">{{node_table_option_desc[paramsNode.ifTab]}}</span>
                    <el-radio-group v-else v-model="paramsNode.ifTab" class="ml-4">
                      <el-radio v-for="(item, index) in node_table_option"
                                :label="item.value"
                                :key="index">
                        {{ item.label }}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="paramsNode.ifTab==1">
                <el-col :span="12">
                  <el-form-item label="数据表英文名称：" prop="tableName">
                    <span v-if="type=='view'">{{paramsNode.tableName}}</span>
                    <el-input v-else v-model="paramsNode.tableName" clearable style="width: 100%" placeholder="请输入数据表英文名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="账期字段：" prop="period">
                    <span v-if="type=='view'">{{paramsNode.period}}</span>
                    <el-input v-else v-model="paramsNode.period" clearable style="width: 100%" placeholder="请输入账期字段"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否增加提示语：" prop="flag">
                    <span v-if="type=='view'">{{node_table_option_desc[paramsNode.flag==1?1:0]}}</span>
                    <el-radio-group v-else v-model="paramsNode.flag" class="ml-4">
                      <el-radio v-for="(item, index) in node_table_option"
                                :label="item.value"
                                :key="index">
                        {{ item.label }}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <el-tabs v-model="activeName" type="border-card" v-if="paramsNode.type==9||paramsNode.ifTab==1">
            <el-tab-pane v-if="paramsNode.ifTab==1" name="维度信息" label="维度信息">
              <div class="tittle-wrap">
                <span>维度信息</span>
                <div>
                  <el-button type="primary" v-if="type=='add'" size="small" @click="addLatitude">新增</el-button>
                  <el-button type="primary" v-if="type=='add'" size="small" @click="synchronousDataFun(2)">同步</el-button>
                </div>
              </div>
              <el-table
                  v-if="dataLatitudeItems.length>0"
                  :data="dataLatitudeItems"
                  stripe
                  :header-cell-style="{background:'#F5F7FA',color:'#333333',textAlign: 'left'}"
                  style="width: 100%;"
              >
                <el-table-column
                    prop="latitudeName"
                    width="200"
                    label="维度名称"
                    align="left"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop=""
                    width="100"
                    align="left"
                    label="状态">
                  <template #default="scope">
                    {{node_status_option_desc[scope.row.status]}}
                  </template>
                </el-table-column>
                <el-table-column
                    prop="bmqDesc"
                    label="大模型问题描述"
                    align="left"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop=""
                    width="150"
                    label="快速上手是否可见"
                    align="left"
                    show-overflow-tooltip>
                  <template #default="scope">
                    {{node_table_option_desc[scope.row.isVisible]}}
                  </template>
                </el-table-column>
                <el-table-column
                    prop="statusOmg"
                    width="120"
                    align="left"
                    label="是否快速提问">
                  <template #default="scope">
                    {{node_table_option_desc[scope.row.isQuickq]}}
                  </template>
                </el-table-column>
                <el-table-column
                    prop="sort"
                    width="80"
                    align="left"
                    label="排序">
                </el-table-column>
                <el-table-column
                    v-if="type=='add'"
                    prop=""
                    width="150"
                    align="left"
                    label="操作">
                  <template #default="scope">
                    <el-button type="primary" size="small" @click="updateLatitude(scope.row)">修改</el-button>
                    <el-button type="danger" size="small" @click="delLatitude(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                  background
                  layout="prev, pager, next"
                  @current-change="latitudeCurrentChange"
                  :current-page.sync="paramsLatitude.startIndex"
                  :page-size="paramsLatitude.pageSize"
                  :total="paramsLatitude.totalNum"
              >
              </el-pagination>
            </el-tab-pane>
            <el-tab-pane v-if="paramsNode.type==9" name="指标信息" label="指标信息">
              <div class="tittle-wrap">
                <span>指标信息</span>
                <div>
                  <el-button type="primary" v-if="type=='add'" size="small" @click="addIndicator">新增</el-button>
                  <el-button type="primary" v-if="type=='add'" size="small" @click="synchronousDataFun(1)">同步</el-button>
                </div>
              </div>
              <el-table
                  v-if="dataItems.length>0"
                  :data="dataItems"
                  stripe
                  :header-cell-style="{background:'#F5F7FA',color:'#333333',textAlign: 'left'}"
                  style="width: 100%;"
              >
                <el-table-column
                    prop="indicatorName"
                    width="200"
                    label="指标名称"
                    align="left"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop=""
                    width="100"
                    align="left"
                    label="状态">
                  <template #default="scope">
                    {{node_status_option_desc[scope.row.status]}}
                  </template>
                </el-table-column>
                <el-table-column
                    prop="bmqDesc"
                    label="大模型问题描述"
                    align="left"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop=""
                    width="150"
                    label="快速上手是否可见"
                    align="left"
                    show-overflow-tooltip>
                  <template #default="scope">
                    {{node_table_option_desc[scope.row.isVisible]}}
                  </template>
                </el-table-column>
                <el-table-column
                    prop="statusOmg"
                    width="120"
                    align="left"
                    label="是否快速提问">
                  <template #default="scope">
                    {{node_table_option_desc[scope.row.isQuickq]}}
                  </template>
                </el-table-column>
                <el-table-column
                    prop="sort"
                    width="80"
                    align="left"
                    label="排序">
                </el-table-column>
                <el-table-column
                    v-if="type=='add'"
                    prop=""
                    width="150"
                    align="left"
                    label="操作">
                  <template #default="scope">
                    <el-button type="primary" size="small" @click="updateIndicator(scope.row)">修改</el-button>
                    <el-button type="danger" size="small" @click="delIndicator(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                  background
                  layout="prev, pager, next"
                  @current-change="handleCurrentChange"
                  :current-page.sync="paramsIndicator.startIndex"
                  :page-size="paramsIndicator.pageSize"
                  :total="paramsIndicator.totalNum"
              >
              </el-pagination>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogUpdateVisible" title="新增/修改指标">
    <el-form :inline="true" ref="ref_indicator" :model="currentIndicator" label-width="140px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="指标名称：" prop="indicatorName">
            <el-input v-model="currentIndicator.indicatorName" clearable style="width: 1.5rem" placeholder="请输入指标名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-select style="width: 1.5rem" v-model="currentIndicator.status" clearable placeholder="请选择">
              <el-option
                  v-for="item in node_status_option"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="快速上手是否可见" prop="isVisible">
            <el-select style="width: 1.5rem" v-model="currentIndicator.isVisible" clearable placeholder="请选择">
              <el-option
                  v-for="item in node_table_option"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否快速提问" prop="isQuickq">
            <el-select style="width: 1.5rem" v-model="currentIndicator.isQuickq" clearable placeholder="请选择">
              <el-option
                  v-for="item in node_table_option"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="大模型问题描述：" style="width: 100%" prop="bmqDesc">
            <el-input v-model="currentIndicator.bmqDesc" clearable style="width: 3.9rem" placeholder="请输入大模型问题描述"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="排序：" style="width: 100%" prop="sort">
            <el-input v-model="currentIndicator.sort" clearable style="width: 3.9rem" placeholder="请输入排序"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">取消</el-button>
        <el-button type="primary" @click="saveIndicator">保存</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogLatutideVisible" title="新增/修改维度">
    <el-form :inline="true" ref="ref_latitude" :model="currentLatitude" label-width="140px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="维度名称：" prop="latitudeName">
            <el-input v-model="currentLatitude.latitudeName" clearable style="width: 1.5rem" placeholder="请输入维度名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-select style="width: 1.5rem" v-model="currentLatitude.status" clearable placeholder="请选择">
              <el-option
                  v-for="item in node_status_option"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="快速上手是否可见" prop="isVisible">
            <el-select style="width: 1.5rem" v-model="currentLatitude.isVisible" clearable placeholder="请选择">
              <el-option
                  v-for="item in node_table_option"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否快速提问" prop="isQuickq">
            <el-select style="width: 1.5rem" v-model="currentLatitude.isQuickq" clearable placeholder="请选择">
              <el-option
                  v-for="item in node_table_option"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="大模型问题描述：" style="width: 100%" prop="bmqDesc">
            <el-input v-model="currentLatitude.bmqDesc" clearable style="width: 3.9rem" placeholder="请输入大模型问题描述"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="排序：" style="width: 100%" prop="sort">
            <el-input v-model="currentLatitude.sort" clearable style="width: 3.9rem" placeholder="请输入排序"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogLatutideVisible = false">取消</el-button>
        <el-button type="primary" @click="saveLatitude">保存</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-if="dialogSynchronousVisible" v-model="dialogSynchronousVisible" :title="dialogTitle">
    <el-table
        ref="multipleTableRef"
        :data="synchronousData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column :label="synchronousType=='1'?'指标名称':'维度名称'" width="200" show-overflow-tooltip >
        <template #default="scope">{{ synchronousType=='1'?scope.row.indicatorName:scope.row.latitudeName }}</template>
      </el-table-column>
      <el-table-column property="status" label="状态" width="120">
        <template #default="scope">
          <el-select style="width: 100%" v-model="scope.row.status" clearable placeholder="请选择">
            <el-option
                v-for="item in node_status_option"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column property="isVisible" label="快速上手是否可见">
        <template #default="scope">
          <el-select style="width: 100%" v-model="scope.row.isVisible" clearable placeholder="请选择">
            <el-option
                v-for="item in node_table_option"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column property="isVisible" label="是否快速提问">
        <template #default="scope">
          <el-select style="width: 100%" v-model="scope.row.isQuickq" clearable placeholder="请选择">
            <el-option
                v-for="item in node_table_option"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column property="sort" label="排序" width="100">
        <template #default="scope">
          <el-input v-model="scope.row.sort" clearable style="width: 100%" placeholder="排序"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogSynchronousVisible = false">取消</el-button>
        <el-button type="primary" @click="saveSynchronousData">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {
  findTableTreeByPid,
  getIndicatorListByMenuId,
  updateOrAddIndicator,
  delIndicator,
  updateOrAddTableTree,
  delTableTree,
  judgmentTable,
  judgmentAddTable,
  getLatitudeListByTableCode,
  updateOrAddLatitude,
  delLatitude,
  getLatitudeIndicatorList,
  addLatitudeIndicator
} from '@/api/chartdb'
import consts from '../../common/consts'
import headPage from '../ui/headPage.vue'
import moment from 'moment'
import { ElMessage } from 'element-plus'

export default {
  name: 'empMenu',
  components: {
    headPage
  },
  props:{},
  data(){
    return {
      type:'',//控制是否展示右侧信息
      currentType:'',//控制是否展示指标
      expandedKeys:[],
      dataSource:[],
      dataItems:[],
      dataLatitudeItems:[],
      paramsNodeAdd:{},
      menuIdAdd:'',
      paramsNode:{
        id:'',
        leaf:'',
        menuId:'',
        menuSort:'',
        period:'',
        pid:'',
        status:'',
        tableName:'',
        pName:'',
        title:'',
        type:'',
        ifTab:'',
        flag:'',
      },
      paramsIndicator:{
        menuId:'',
        startIndex:1,
        pageSize:10,
        totalNum:0,
      },
      paramsLatitude:{
        modelCode:'',
        startIndex:1,
        pageSize:10,
        totalNum:0,
      },
      currentIndicator:{},
      currentLatitude:{},
      props:{
        isLeaf: 'leaf'
      },
      currentTable:'',
      saveflag:false,
      node_status_option:consts.node_status_option,
      node_status_option_desc:consts.node_status_option_desc,
      node_table_option:consts.node_table_option,
      node_table_option_desc:consts.node_table_option_desc,
      node_type_option:consts.node_type_option,
      node_type_option_desc:consts.node_type_option_desc,
      dialogUpdateVisible:false,
      dialogLatutideVisible:false,
      dialogSynchronousVisible:false,
      rules: {
        latitudeName: [{ required: true, message: " ", trigger: "blur" }],
        indicatorName: [{ required: true, message: " ", trigger: "blur" }],
        status: [{ required: true, message: " ", trigger: "blur" }],
        isVisible: [{ required: true, message: " ", trigger: "blur" }],
        isQuickq: [{ required: true, message: " ", trigger: "blur" }],
        bmqDesc: [{ required: true, message: " ", trigger: "blur" }],
        sort: [{ required: true, message: " ", trigger: "blur" }],
      },
      noderules: {
        title: [{ required: true, message: " ", trigger: "blur" }],
        menuSort: [{ required: true, message: " ", trigger: "blur" }],
        status: [{ required: true, message: " ", trigger: "blur" }],
        ifTab: [{ required: true, message: " ", trigger: "blur" }],
        tableName: [{ required: true, message: " ", trigger: "blur" }],
        period: [{ required: true, message: " ", trigger: "blur" }],
        type: [{ required: true, message: " ", trigger: "blur" }],
        isVisible: [{ required: true, message: " ", trigger: "blur" }],
        flag: [{ required: true, message: " ", trigger: "blur" }],
      },
      dialogTitle:"",
      synchronousData:[],
      multipleSelection:[],
      synchronousType:'',//同步类型 1 指标 2 维度
      activeName:"",
    }
  },
  mounted() {
    this.findTableTreeByPid(0);
  },
  methods:{
    handleSelectionChange(val){
      this.multipleSelection.value = val
      console.log("this.multipleSelection.value====>",this.multipleSelection.value)
    },
    saveSynchronousData(){
      if(!this.multipleSelection.value||this.multipleSelection.value.length==0){
        ElMessage({
          message: '请选择需要同步的数据',
          type: 'warning'
        })
        return false
      }
      var param={
        list:this.multipleSelection.value,
        type:this.synchronousType
      }
      addLatitudeIndicator(param).then((respo) => {
        this.dialogSynchronousVisible = false
        this.getLatitudeListByTableCode();
        if(this.synchronousType==1){
          this.getIndicatorListByMenuId();
        }else {
          this.getLatitudeListByTableCode();
        }
      })
    },
    synchronousDataFun(type){
      this.synchronousType=type
      if(type==1) this.dialogTitle="同步指标信息"
      else this.dialogTitle="同步维度信息"
      var param={
        modelCode: this.currentTable,
        fieldClass: type
      }
      getLatitudeIndicatorList(param).then((respo) => {
        console.log("respo===>",respo.data.data)
        // this.synchronousData=respo.data.data
        this.synchronousData=[]
        if(!respo.data.data) return false
        respo.data.data.forEach((item,index)=>{
          var itemAdd={}
          console.log("paramsNode===>",this.paramsNode)
          if(type==1){
            itemAdd={
              "indicatorName": item.fieldName,
              menuId:this.paramsNode.menuId,
              "status": "1",
              "bmqDesc": item.fieldName,
              "isVisible": "1",
              "isQuickq": "0",
              "sort": item.sort,
              "tableCode": this.currentTable
            }
          }else {
            itemAdd={
              "latitudeName": item.fieldName,
              "status": "1",
              "bmqDesc": item.fieldName,
              "isVisible": "1",
              "isQuickq": "0",
              "sort": item.sort,
              "tableCode": this.currentTable,
              fieldCode:item.fieldCode
            }
          }
          this.synchronousData.push(itemAdd)
        })
      })
      this.dialogSynchronousVisible=true
    },
    saveLatitude(){
      this.$refs.ref_latitude.validate((valid) => {
        if (valid) {
          updateOrAddLatitude(this.currentLatitude).then((res) => {
            if(res.data.code=="200"){
              ElMessage({
                message: '保存成功',
                type: 'success'
              })
              this.dialogLatutideVisible = false
              this.getLatitudeListByTableCode();
            }else {
              ElMessage({
                message: '保存失败',
                type: 'error'
              })
            }
          })
        } else {
          ElMessage({
            message: '校验不通过，请检查输入项',
            type: 'warning'
          })
        }
      });
    },
    saveIndicator(){
      this.$refs.ref_indicator.validate((valid) => {
        if (valid) {
          this.currentIndicator.tableCode=this.currentTable
          updateOrAddIndicator(this.currentIndicator).then((res) => {
            if(res.data.code=="200"){
              ElMessage({
                message: '保存成功',
                type: 'success'
              })
              this.dialogUpdateVisible = false
              this.getIndicatorListByMenuId();
            }else {
              ElMessage({
                message: '保存失败',
                type: 'error'
              })
            }
          })
        } else {
          ElMessage({
            message: '校验不通过，请检查输入项',
            type: 'warning'
          })
        }
      });
    },
    addIndicator(){
      this.currentIndicator= {
        menuId:this.paramsNode.menuId,
        isQuickq:'1',
        isVisible:'1',
        status:'1',
      }
      this.dialogUpdateVisible=true;
    },
    addLatitude(){
      this.currentLatitude= {
        tableCode:this.paramsNode.tableName,
        isQuickq:'1',
        isVisible:'1',
        status:'1',
      }
      this.dialogLatutideVisible=true;
    },
    updateIndicator(item){
      this.currentIndicator=item
      this.dialogUpdateVisible=true;
    },
    updateLatitude(item){
      this.currentLatitude=item
      this.dialogLatutideVisible=true;
    },
    delIndicator(item){
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delIndicator({id:item.id}).then((res) => {
          if(res.data.code=="200"){
            ElMessage({
              message: '删除成功',
              type: 'success'
            })
            this.dialogUpdateVisible = false
            this.getIndicatorListByMenuId();
          }else {
            ElMessage({
              message: '删除失败',
              type: 'error'
            })
          }
        })
      }).catch(() => {
      });
    },
    delLatitude(item){
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delLatitude({id:item.id}).then((res) => {
          if(res.data.code=="200"){
            ElMessage({
              message: '删除成功',
              type: 'success'
            })
            this.dialogLatutideVisible = false
            this.getLatitudeListByTableCode();
          }else {
            ElMessage({
              message: '删除失败',
              type: 'error'
            })
          }
        })
      }).catch(() => {
      });
    },
    async getCurrentInfo(node,data){
      this.type="view"
      this.paramsNode={}
      this.paramsNode=data;
      await judgmentTable({ id:data.id }).then((res) => {
        this.paramsNode.ifTabShow=res.data.data.data
      })
      if(this.paramsNode.pid!=0){
        this.paramsNode.pName=node.parent.data.title
      }else {
        this.paramsNode.pName=""
      }
      if(this.paramsNode.tableName){
        this.paramsNode.ifTab="1"
      }else this.paramsNode.ifTab="0"
      this.paramsIndicator.menuId=this.paramsNode.menuId
      if(this.paramsNode.type==9){
        this.paramsIndicator.startIndex=1
        this.getIndicatorListByMenuId()
      }
      if(this.paramsNode.tableName){
        this.paramsLatitude.startIndex=1
        this.paramsLatitude.modelCode=this.paramsNode.tableName
        this.getLatitudeListByTableCode()
      }
      this.currentType=this.paramsNode.type;
      if(this.paramsNode.ifTab==1){
        this.activeName="维度信息"
      }else if(this.paramsNode.type==9){
        this.activeName="指标信息"
      }
    },
    saveNode(){
      this.saveflag=true
      this.$refs.ref_node.validate((valid) => {
        if (valid) {
          if(this.paramsNode.ifTab==0){
            this.paramsNode.tableName=""
            this.paramsNode.period=""
            this.paramsNode.flag=""
          }
          updateOrAddTableTree(this.paramsNode).then((data) => {
            if(data.data.code=="200"){
              ElMessage({
                message: '保存成功',
                type: 'success'
              })
              if(!this.paramsNode.id){
                this.expandedKeys=[]
                this.expandedKeys.push(data.data.data.menuId)
              }
              if(this.paramsNodeAdd&&this.paramsNodeAdd.id){
                if(data.data.data){
                  findTableTreeByPid({pid:this.paramsNodeAdd.id}).then((res) => {
                    this.$refs.data_ref.updateKeyChildren(this.paramsNodeAdd.menuId,res.data.data);
                    // let node=this.$refs.data_ref.getNode(this.paramsNodeAdd.menuId)
                    // if(node){
                    //   node.loaded=false
                    //   node.expand()
                    // }
                  })
                }
              }else {
                this.findTableTreeByPid(0);
              }
              this.paramsNode=""
              this.saveflag=false
            }else {
              ElMessage({
                message: '保存失败',
                type: 'error'
              })
              this.saveflag=false
            }
          })
        } else {
          ElMessage({
            message: '校验不通过，请检查输入项',
            type: 'warning'
          })
          this.saveflag=false
        }
      });
    },
    async append(node,data){
      this.getTable(node)
      this.type='add'
      this.currentType=0;
      this.paramsNodeAdd=data
      let ifTabShow;
      await judgmentAddTable({ id:data.id }).then((res) => {
        console.log("res==========>",res)
        ifTabShow=res.data.data.data
      })
      this.paramsNode={
        id:'',
        level:data.level+1,
        leaf:'',
        menuId:'',
        menuSort:'',
        period:'',
        pid:data.id,
        status:'',
        tableName:'',
        pName:data.title,
        title:'',
        type:'',
        ifTab:'',
        ifTabShow:ifTabShow,
      }
    },
    addRoot(){
      this.type='add'
      this.currentType=0;
      this.paramsNodeAdd=""
      this.paramsNode={
        id:'',
        level:1,
        leaf:'',
        menuId:'',
        menuSort:'',
        period:'',
        pid:0,
        status:'',
        tableName:'',
        pName:'',
        title:'',
        type:'0',
        ifTab:'',
        ifTabShow:false,
      }
    },
    async update(node,data){
      this.getTable(node)
      this.type='add'
      this.paramsNodeAdd=node.parent.data
      this.paramsNode=data;
      await judgmentTable({ id:data.id }).then((res) => {
        this.paramsNode.ifTabShow=res.data.data.data
      })
      if(this.paramsNode.pid!=0){
        this.paramsNode.pName=node.parent.data.title
      }else {
        this.paramsNode.pName=""
      }
      if(this.paramsNode.tableName){
        this.paramsNode.ifTab="1"
      }else this.paramsNode.ifTab="0"
      this.paramsIndicator.menuId=this.paramsNode.menuId
      if(this.paramsNode.type==9){
        this.paramsIndicator.startIndex=1
        this.getIndicatorListByMenuId()
      }
      if(this.paramsNode.tableName) {
        this.paramsLatitude.startIndex = 1
        this.getLatitudeListByTableCode()
      }
      this.currentType=this.paramsNode.type;
      if(this.paramsNode.ifTab==1){
        this.activeName="维度信息"
      }else if(this.paramsNode.type==9){
        this.activeName="指标信息"
      }
    },
    remove(node,data){
      this.type='view'
      this.paramsNode=data;
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delTableTree({id:this.paramsNode.id}).then((res) => {
          if(res.data.data.code=="200"){
            ElMessage({
              message: '删除成功',
              type: 'success'
            })
            const parent = node.parent;
            const children = parent.childNodes;
            const childrenData1 = parent.data.children;
            const childrenData2 = parent.data;
            const index = children.findIndex(d => d.data.id === data.id);
            children.splice(index, 1);
            if(childrenData1&&childrenData1.length>0) childrenData1.splice(index, 1);
            if(childrenData2&&childrenData2.length>0) childrenData2.splice(index, 1);
            this.paramsNode=""
          }else {
            ElMessage({
              message: '删除失败，'+res.data.data.message,
              type: 'error'
            })
          }
        })
      }).catch(() => {
      });
    },
    getIndicatorListByMenuId(){
      var vm=this;
      vm.dataItems=[]
      getIndicatorListByMenuId(this.paramsIndicator).then((res) => {
        vm.dataItems=res.data.data.records
        vm.paramsIndicator.totalNum=res.data.data.total
        vm.paramsIndicator.startIndex=res.data.data.current
        vm.paramsIndicator.pageSize=res.data.data.size
      })
    },
    getLatitudeListByTableCode(){
      var vm=this;
      vm.dataLatitudeItems=[]
      getLatitudeListByTableCode(this.paramsLatitude).then((res) => {
        vm.dataLatitudeItems=res.data.data.records
        vm.paramsLatitude.totalNum=res.data.data.total
        vm.paramsLatitude.startIndex=res.data.data.current
        vm.paramsLatitude.pageSize=res.data.data.size
      })
    },
    handleCurrentChange:function (startIndex) {
      var vm = this;
      vm.paramsIndicator.startIndex = startIndex;
      vm.getIndicatorListByMenuId();
    },
    latitudeCurrentChange:function (startIndex) {
      var vm = this;
      vm.paramsLatitude.startIndex = startIndex;
      vm.getLatitudeListByTableCode();
    },
    findTableTreeByPid(pid){
      findTableTreeByPid({pid:pid}).then((res) => {
        this.dataSource=res.data.data
      })
    },
    loadNode(node, resolve){
      findTableTreeByPid({pid:node.data.id}).then((res) => {
        let data=this.isleaf(res.data.data)
        resolve(data);
      })
    },
    //判断是否是叶子节点
    isleaf(data){
      data.forEach(item=>{
        if(item.type==9){
          item.leaf=true
        }else {
          item.leaf=false
        }
      })
      return data
    },
    //判断父节点是否有数据表
    judgment(node){},
    //查询当前节点对应的数据表
    getTable(node){
      console.log("node===>",node)
      this.currentTable=""
      if(node){
        if(node.data.tableName){
          this.currentTable=node.data.tableName
        }else {
          this.getTable(node.parent)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-info-wrap{
  width: 100%;
  height: calc(100% - .3rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  background: #f1f1f1;
  .tree-wrap{
    width: calc(35% - .2rem);
    height: calc(100% - .2rem);
    padding: .1rem;
    border-radius: .1rem;
    border: 1px solid #ebebeb;
    background: #fff;
    overflow: auto;
    position: relative;
  }
  .node-wrap{
    width: calc(65% - .2rem);
    height: calc(100% - .2rem);
    padding: .1rem;
    border-radius: .1rem;
    border: 1px solid #ebebeb;
    background: #fff;
    overflow: auto;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
.btn-tree{
  color: #5C7CFF;
  font-size: 13px;
  margin-right: 8px;
}
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
  background-color: #5C7CFF !important;
  color: #fff;
  .btn-tree{
    color: #fff;
  }
}
:deep(.el-input__wrapper){
  width: 300px !important;
}
.tittle-wrap{
  height: 0.2rem;
  font-size: 0.1rem;
  display: flex;
  align-items: center;
  color: #333;
  background: #f1f1f1;
  padding: 0 0.1rem;
  margin-bottom: 0.1rem;
  justify-content: space-between;
  span{
    border-left:  4px solid #5C7CFF;
    height: .1rem;
    line-height: .1rem;
    padding-left: .05rem;
  }
}
.el-pagination {
  display: flex;
  align-items: center;
  margin-top: 5px;
  justify-content: flex-end;
}
.dialog-footer{
  height: .3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-shengxiao{
  color: green;
  margin-left: .02rem;
  font-size: .1rem;
}
.icon-shixiao{
  //color: gray;
  margin-left: .02rem;
  font-size: .1rem;
}
</style>